<template>
  <div class="procedure">
    <ivue-crud
      :data="procedures"
      :dialogOpen.sync="dialogOpen"
      dialog-width="60%"
      :editData="editData"
      :isUpdate="isUpdate"
      :option="option"
      :show-page=false
      :searchForm.sync="searchForm"
      :syncDataReady="syncDataReady"
      :tableLoading="loading"
      :title="title"
      @on-create="onCreate"
      @on-page-change="pageChange"
      @on-page-size-change="pageSizeChange"
      @on-update="onUpdate"
      @search="doSearch"
      ref="ivueCrud"
    >
      <div slot="headerMenu">
        <Button :size="option.searchSize" @click="historySearch" custom-icon="iconfont " type="warning">历史版本</Button>
        <Button :size="option.searchSize" @click="doSearch" :loading="loading" custom-icon="iconfont icon-shuaxin"
                type="primary">刷新
        </Button>
        <Button :size="option.searchSize" @click="create" custom-icon="iconfont icon-plus" type="success">新增</Button>
      </div>
    </ivue-crud>
  </div>
</template>

<script>
  export default {
    name: 'procedure',
    components: {},
    data() {
      return {
        type: 'Procedure',
        pageLoading: false,
        isUpdate: false,
        showTest: false,
        loading: false,
        editData: {},
        pageSize: 10,
        pageNo: 0,
        deptData: [],
        searchText: '',
        syncDataReady: true,
        resource: 'procedure',
        title: '手术操作',
        dialogOpen: false,
        searchForm: {},
      }
    },
    computed: {
      procedures() {
        let jData = [];
        this.$store.state.procedure.procedures.forEach(entry => {
          let re = entry.resource;
          if (re.total && re.total.myStringValue == '0')
            return;
          jData.push({
            url: re.id.myStringValue,
            id: re.id.myUnqualifiedId,
            versionId: re.id.myUnqualifiedVersionId,
            status: re.status ? re.status.myStringValue : '',
            procedureId: (re.identifier && re.identifier[0].value) ? re.identifier[0].value.myStringValue : "",
            patientId: re.subject ? (re.subject.reference ? re.subject.reference.myStringValue.replace('Patient/', '') : '') : '',
            name: re.subject ? (re.subject.display ? re.subject.display.myStringValue : '') : '',
            categoryCode: (re.category && re.category.coding && re.category.coding[0] && re.category.coding[0].code)
              ? re.category.coding[0].code.myStringValue : '',
            categoryName: (re.category && re.category.coding && re.category.coding[0] && re.category.coding[0].display)
              ? re.category.coding[0].display.myStringValue : '',
            procedureCode: (re.code && re.code.coding && re.code.coding[0] && re.code.coding[0].code)
              ? re.code.coding[0].code.myStringValue : '',
            procedureName: (re.code && re.code.coding && re.code.coding[0] && re.code.coding[0].display)
              ? re.code.coding[0].display.myStringValue : '',
            encId: '',
            start: re.performed ? (re.performed.start ? re.performed.start.myStringValue : '') : '',
            end: re.performed ? (re.performed.end ? re.performed.end.myStringValue : '') : '',
            doctorCode: '',
            doctorName: (re.performer && re.performer[0] && re.performer[0].actor && re.performer[0].actor.display)
              ? re.performer[0].actor.display.myStringValue : '',
            firstAssistantCode: '',
            firstAssistantName: (re.performer && re.performer[1] && re.performer[1].actor && re.performer[1].actor.display)
              ? re.performer[1].actor.display.myStringValue : '',
            secondAssistantCode: '',
            secondAssistantName: (re.performer && re.performer[2] && re.performer[2].actor && re.performer[2].actor.display)
              ? re.performer[2].actor.display.myStringValue : '',
            room: re.location && re.location.display ? re.location.display.myStringValue : '',
            icdName: re.reasonReference && re.reasonReference[0] && re.reasonReference[0].display ?
              re.reasonReference[0].display.myStringValue : '',
            bodySiteCode: (re.bodySite && re.bodySite[0].coding && re.bodySite[0].coding[0] && re.bodySite[0].coding[0].code)
              ? re.bodySite[0].coding[0].code.myStringValue : '',
            bodySiteName: (re.bodySite && re.bodySite[0].coding && re.bodySite[0].coding[0] && re.bodySite[0].coding[0].display)
              ? re.bodySite[0].coding[0].display.myStringValue : '',
            resultCode: (re.outcome && re.outcome.coding && re.outcome.coding[0] && re.outcome.coding[0].code)
              ? re.outcome.coding[0].code.myStringValue : '',
            result: (re.outcome && re.outcome.coding && re.outcome.coding[0] && re.outcome.coding[0].display)
              ? re.outcome.coding[0].display.myStringValue : ''
          })
        })
        return jData;
      },
      option() {
        return {
          resource: this.resource,
          searchSize: 'small',
          dialog: true,
          inline: false,
          searchForm: true,
          formGroup: true,
          border: true,
          column: [
            {
              label: '#',
              width: 50,
              type: 'index'
            },
            {
              label: 'ID',
              prop: 'id',
              search: true
            },
            {
              label: '版本',
              prop: 'versionId',
            },
            {
              label: '手术流水号',
              prop: 'procedureId',
            },
            {
              label: '患者ID',
              prop: 'patientId',
              search: true,
              editable: true,
              rules: [{required: true, message: '请输入患者ID', trigger: 'blur'}]
            },
            {
              label: '就诊ID',
              prop: 'encId',
              hideInTb: true,
              editable: true,
            },
            {
              label: '姓名',
              prop: 'name',
              editable: true,
              rules: [{required: true, message: '请输入姓名', trigger: 'blur'}]
            },
            {
              label: '操作分类',
              prop: 'categoryCode',
              type: 'select',
              dicData: [{value: '387713003', label: '手术操作'}],
              labelInValue: true,
              syncLabel: 'categoryName',
              editable: true,
              filterable: true,
              rules: [{required: true, message: '请选择操作分类', trigger: 'change'}],
              render: (h, param) => {
                return h('span', param.row.categoryName)
              }
            },
            {
              label: '手术操作名称',
              prop: 'procedureName',
              search: true,
              hideInTb: true
            },
            {
              label: '手术操作',
              prop: 'procedureCode',
              search: true,
              type: 'select',
              dicData: [{value: '1299000', label: '阑尾切除'}],
              labelInValue: true,
              syncLabel: 'procedureName',
              editable: true,
              filterable: true,
              rules: [{required: true, message: '请选择手术操作', trigger: 'change'}],
              render: (h, param) => {
                return h('span', param.row.procedureName)
              }
            },
            {
              label: '手术开始时间',
              prop: 'start',
              search: true,
              style: {width: '280px'},
              editable: true,
              type: 'datetime',
              rules: [{required: true, message: '请输入手术开始时间', trigger: 'blur'}]
            },
            {
              label: '手术结束时间',
              search: true,
              style: {width: '280px'},
              prop: 'end',
              editable: true,
              type: 'datetime',
              rules: [{required: true, message: '请输入手术开始时间', trigger: 'blur'}]
            },
            {
              label: '手术医师',
              prop: 'doctorName',
              editable: true,
              rules: [{required: true, message: '请输入手术医师', trigger: 'blur'}]
            },
            {
              label: 'I助',
              prop: 'firstAssistantName',
              editable: true,
              rules: [{required: true, message: '请输入I助', trigger: 'blur'}]
            },
            {
              label: 'II助',
              prop: 'secondAssistantName',
              editable: true,
              rules: [{required: true, message: '请输入II助', trigger: 'blur'}]
            },
            {
              label: '手术室',
              prop: 'room',
              editable: true,
              rules: [{required: true, message: '请输入手术室', trigger: 'blur'}]
            },
            {
              label: '术前诊断',
              prop: 'icdName',
              editable: true,
              rules: [{required: true, message: '请输入术前诊断', trigger: 'blur'}]
            },
            {
              label: '手术部位',
              prop: 'bodySiteCode',
              type: 'select',
              editable: true,
              labelInValue: true,
              syncLabel: 'bodySiteName',
              dicData: [{value: '7275008', label: '阑尾'}],
              filterable: true,
              rules: [{required: true, message: '请选择手术部位', trigger: 'change'}],
              render: (h, param) => {
                return h('span', param.row.bodySiteName)
              }
            },
            {
              label: '手术结果',
              prop: 'resultCode',
              type: 'select',
              editable: true,
              labelInValue: true,
              syncLabel: 'result',
              dicData: [{value: '385669000', label: '成功'}],
              filterable: true,
              rules: [{required: true, message: '请选择手术结果', trigger: 'change'}],
              render: (h, param) => {
                return h('span', param.row.result)
              }
            },
            {
              label: '操作',
              width: 100,
              type: 'render',
              render: (h, params) => {
                return h(
                  'div',
                  {
                    class: 'btn-wrap'
                  },
                  [
                    h(
                      'a',
                      {
                        on: {
                          click: () => {
                            this.update(params.row)
                          }
                        }
                      },
                      '编辑'
                    ),
                    h('Divider', {
                      props: {type: 'vertical'},
                    }),
                    h(
                      'a',
                      {
                        on: {
                          click: () => {
                            this.remove(params.row)
                          }
                        }
                      },
                      '删除'
                    )
                  ]
                )
              }
            }
          ]
        }
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      historySearch() {
        if (!this.searchForm.id) {
          this.$Message.error('请输入ID');
          return;
        }
        this.loading = true
        this.$store.dispatch('getHistoryProcedureList', {
          type: this.type,
          id: this.searchForm.id,
        }).then(() => {
          this.loading = false;
        })
      },
      doSearch(searchForm) {
        searchForm = (!(searchForm instanceof MouseEvent) && searchForm) || this.searchForm
        this.loading = true
        this.$store.dispatch('getProcedureList', {
          ...searchForm,
          type: this.type
        }).then(() => {
          this.loading = false
        })
      },
      remove(ds) {
        this.$Modal.confirm({
          title: '删除确认',
          content: '<p>是否确认删除当前数据</p>',
          onOk: () => {
            this.pageLoading = true
            this.$store.dispatch('deleteProcedure', {type: this.type, id: ds.id}).then(() => {
              this.pageLoading = false
              this.$Message.success('删除成功')
              this.searchForm.id = ds.id
              this.doSearch()
            }).catch(() => {
              this.pageLoading = false
            })
          },
          onCancel: () => {
          }
        })
      },
      create() {
        this.editData = {
          patientId: localStorage.getItem('patientId'),
          name: '张三',
          procedureId: '123',
          categoryCode: '387713003',
          categoryName: '手术操作',
          procedureCode: '1299000',
          procedureName: '阑尾切除',
          encId: '',
          start: '2019-05-20 10:10:45',
          end: '2019-05-20 12:10:45',
          doctorCode: 'd001',
          doctorName: '李四',
          firstAssistantCode: 'd002',
          firstAssistantName: '王五',
          secondAssistantCode: 'd003',
          secondAssistantName: '王六',
          room: '第四手术室',
          icdName: '阑尾炎',
          bodySiteCode: '7275008',
          bodySiteName: '阑尾',
          resultCode: '385669000',
          result: '成功',
        }
        this.isUpdate = false
        this.dialogOpen = true
      },

      onCreate(row) {
        this.syncDataReady = false
        this.$store.dispatch('createProcedure', row).then((res) => {
          this.syncDataReady = true
          this.searchForm.id = res.data.myId.myUnqualifiedId
          this.doSearch()
          window.setTimeout(() => {
            this.dialogOpen = false
            this.$Message.success(`新增${this.title}成功`)

          }, 200)
        }).catch((err) => {
          this.syncDataReady = true
          this.$Message.error(err.message)
        })
      },
      update(row) {
        this.editData = row
        this.dialogOpen = true
        this.isUpdate = true
      },
      onUpdate(row) {
        this.syncDataReady = false
        this.$store.dispatch('updateProcedure', row).then(() => {
          this.syncDataReady = true
          this.doSearch()
          window.setTimeout(() => {
            this.dialogOpen = false
            this.$Message.success(`更新${this.title}成功`)
          }, 200)
        }).catch(() => {
          this.syncDataReady = true
        })
      },
      refresh() {
        this.pageNo = 0
        this.pageSize = 10
        this.doSearch()
      },
      pageChange(pageNo) {
        this.pageNo = pageNo
        this.doSearch()
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize
        this.doSearch()
      }
    }
  }
</script>

<style scoped lang="less">

  .procedure {
    height: 100%;
  }

  .pane-form {
    max-width: 600px;
    margin: 20px;
  }

  .menu-btn {
    float: right;
    position: relative;

    :hover {
      cursor: pointer;
    }
  }
</style>
